<script lang="ts" setup>
import { reactive, defineAsyncComponent, onActivated, ref } from 'vue'
const PhoneForm = defineAsyncComponent(() => import('@/components/form/PhoneForm.vue'))
import { useTable } from '@/hooks/useTable'
import { queryStoreOrder } from '@/api/store'
import { getToken } from '@/utils/cache/cookies'
import { BatteryPackageDetailOrderTableCol } from '@/api/user/types/user'
import { queryStoreOrderTableCol } from '@/api/store/types/store'
import { useRoute } from 'vue-router'

const BatteryTermTable = defineAsyncComponent(
  () => import('@/components/table/BatteryTermTable.vue')
)
const AdjustTermDialog = defineAsyncComponent(() => import('@/components/dialog/AdjustTerm.vue'))
const route = useRoute()
const form = reactive({
  phone: '',
  orderStatus: '0',
  orderId: '',
  storeId: route.query.storeId,
  type: 'battery'
})
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryStoreOrderTableCol>(queryStoreOrder, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)

  load(form)
}
const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ handleFormSearch, setId })
onActivated(() => {
  form.storeId = route.query.storeId
})
const AdjustTermDialogRef = ref<InstanceType<typeof AdjustTermDialog> | null>(null)
const handleOpenAdjustTerm = (data: BatteryPackageDetailOrderTableCol) => {
  AdjustTermDialogRef.value?.setId(data.orderId)
  AdjustTermDialogRef.value?.open()
}
</script>

<template>
  <phone-form v-model="form" @search="handleFormSearch">
    <template #other>
      <el-form-item prop="orderId" label="订单号">
        <el-input v-model="form.orderId" placeholder="请输入订单号" />
      </el-form-item>
    </template>
    <template #select>
      <el-form-item prop="orderStatus" label="订单状态">
        <el-select v-model="form.orderStatus" placeholder="请选择订单状态" style="width: 150px">
          <el-option label="不限" value="0" />
          <el-option label="待确认(待领取,已退租未确认)" value="1" />
          <el-option label="租用中(租用中,已逾期)" value="2" />
          <el-option label="已完结(已结束,已取消)" value="3" />
        </el-select>
      </el-form-item>
    </template>
  </phone-form>
  <battery-term-table
    :loading="loading"
    @open="handleOpenAdjustTerm"
    :data="data as BatteryPackageDetailOrderTableCol[]"
  />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <adjust-term-dialog ref="AdjustTermDialogRef" @refresh="load" />
</template>

<style scoped></style>
